<template>
    <div class="hearder-outer">
      <div class="hearder-w">
        <div class="logo">
          <img class="logo-img" src="https://rs.dance365.com/logo@3xrenew3.png" />
        </div>
        <ul class="hearder-nav">
          <li class="nav-item1" ><router-link to="/" >资源</router-link></li>
          <li class="nav-item"><router-link to="/course" >课程</router-link></li>
          <li class="nav-item"><router-link to="/studio" >练习室</router-link></li>
          <li class="nav-item"><router-link to="/communication" >交流</router-link></li>
          <li class="nav-item"><router-link to="/Mine" >我的</router-link></li>
        </ul>
        <div class="hearder-right">
          <div class="hearder-download iconfont icon-phone">下载APP</div>
          <el-dropdown class="hearder-dropdown">
            <el-button class="hearder-publish iconfont icon-jiahao">
              发布
            </el-button>
            <template #dropdown>
              <el-dropdown-menu popper-class="dropdown-item">
                <el-dropdown-item class="dropdown-item-i dropdown-item-h"
                  >发布资源</el-dropdown-item
                >
                <el-dropdown-item class="dropdown-item-i" divided
                  >作品</el-dropdown-item
                >
                <el-dropdown-item class="dropdown-item-i" divided
                  >教程</el-dropdown-item
                >
                <el-dropdown-item class="dropdown-item-i" divided
                  >动态</el-dropdown-item
                >
                <el-dropdown-item class="dropdown-item-i dropdown-item-h" divided
                  >发布商品</el-dropdown-item
                >
                <el-dropdown-item class="dropdown-item-i" divided
                  >视频课</el-dropdown-item
                >
                <el-dropdown-item class="dropdown-item-i" divided
                  >线下课</el-dropdown-item
                >
                <el-dropdown-item class="dropdown-item-i" divided
                  >直播课</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div class="hearder-avatar">
            <el-avatar :size="30" :src="circleUrl" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  export default {
    name: "Hearder",
  };
  </script>
  
  <script setup lang="ts">
  
  // 头像图片地址
  const circleUrl =
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";

    //点击排他
  </script>
  
  <style scoped lang="scss">
  .hearder-outer {
    height: 60px;
    box-sizing: border-box;
    box-shadow: 4px 0 9px #c1c1c1;
    background-color: #ffffff;
    .hearder-w {
      height: 60px;
      width: 1200px;
      margin: auto;
      .logo {
        height: 60px;
        float: left;
        box-sizing: border-box;
        padding-top: 15px;
        line-height: 60px;
        margin-right: 25px;
        font-size: 0;
        .logo-img {
          width: 128px;
          height: 30px;
        }
      }
      .hearder-nav {
        list-style: none;
        display: flex;
        float: left;
        font-size: 18px;
        margin: 8px 0;
        box-sizing: border-box;            
        li {
          :hover {
            color: #f93684;
          }
        }
        .nav-item1 {
          padding: 12px 10px;
          color: #f93684;
          ~ .nav-item {
            margin-left: 35px;
            padding: 12px 10px;
          }
        }
      }
      .hearder-right {
        display: flex;
        float: right;
        box-sizing: border-box;
        .hearder-download {
          font-size: 16px;
          margin: 21px 30px 22px 0;
        }
        .hearder-dropdown {
          .hearder-publish {
            width: 75px;
            height: 30px;
            box-sizing: border-box;
            background-color: #f93684;
            color: white;
            border-radius: 20px;
            float: right;
            text-align: center;
            line-height: 30px;
            margin: 15px 0;
            margin-right: 28px;
            margin-top: 15px;
          }
          .dropdown-item {
            &:hover .dropdown-item-i {
              background-color: #c1c1c1;
            }
          }
        }
        .hearder-avatar {
          float: right;
          box-sizing: border-box;
          margin-top: 14px;
        }
      }
    }
  }
  .active{
    background: #f93684;
  }
  </style>